<template>
    <div class="bod">
        <div class="ul_li_data" @click="orderdetailsHref">
            <div class="ul_li_data_left">
                <img :src="goodsThum"> 
             </div>
                <div class="ul_li_data_right">
                    <p style=" width: 201px; height: 19px;overflow: hidden;text-align: left;white-space: nowrap;text-overflow: ellipsis;">{{goodsName}}</p>
                    <span>￥{{ goodsScreenPrice|amountMin100(2)}}</span> <span>X{{goodsNumber}}</span>
                </div>
                <div class="clearfix"></div>
        </div>
        <div class="comments">
             <textarea placeholder="收到的商品怎么样？您还满意吗？分享给其他小伙伴做个 参考呗(最高50字)" v-model="commentContent">   
             </textarea>
             <div class="bottom-upload">
                <div class="same-box"  v-for="(iu, index) in imgUrls" :key="iu.index">
                <img :src="iu" class="iu_iu">
                <span class="list-img-close" @click='delImage(index)'></span>
                </div>
                 <div class="same-box" v-show="imgUrls.length<4">
                    <input class="upload-img" id="inpupimg"  type="file" @change="onFileChange"  accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple><!--capture="camera"-->
                    <label class="jia-icon" for="inpupimg"></label>
                 </div>
            </div>
        </div>
        <div class="Commentset">
             <div class="xz-icon"  :class="{chak_avti:nm}"  @click="niming">

             </div>
             匿名
             <span>
                 你的评价能帮助其它小伙伴们哟
             </span>
             <div class="clearfix"></div>
        </div>
        <button class="subtn" @click="comment">发布</button>
    </div>
</template>
<style scoped>
.clearfix{
    clear: both;
}
.ul_li_data{
    padding:20px 15px;
    border-bottom: 1px solid #e5e5e5;
}
.ul_li_data_left{
    float: left; 
    padding-right: 15px;
}
.ul_li_data_left img{
    width: 80px;
    height: 80px;
   
}
.ul_li_data_right{
    text-align: left;
}
.ul_li_data_right span:nth-of-type(1){
    color: red;
}
.ul_li_data_right span:nth-of-type(2){
    float:right;
}
.ul_li_data_right p{
    text-align: left;
    position:relative;
    line-height:25px;
    overflow: hidden;
    display: block;
    overflow: scroll;
    text-overflow: ellipsis;
     -webkit-line-clamp: 2;
}
.comments textarea{
    width: 100%;
    height: 230px;
   
}
.comments{
     position: relative;
}
.bottom-upload{
    height: 5rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.5rem;
    position: absolute;
    top: 119px;
}
.upload-img{
    display: none;
}
.list-img-close{
    height: 15px;
    width: 15px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: url("../../../assets/personal/images/addcha.png") no-repeat;
    background-size: 100% 100%;
}
.jia-icon{
    background: url("../../../assets/personal/images/addimg.png") no-repeat center center;
    background-size: 100% 100%;
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    left: 50%;
    margin-left: -1rem;
    top: 50%;
    margin-top: -1rem;
}
.same-box{
    height: 3.5rem;
    width: 3.5rem;
    margin-left: 0.5rem;
    position: relative;
    padding: 0.1rem;
}
.iu_iu{
    margin-top: 15px;
}
.Commentset{
text-align: left;
background: white;
padding: 15px;
margin-top: -16px;
}
.Commentset span{
    float:right;
    color: #999999;
}
.xz-icon{
    margin-right: 10px;
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 50%;
    background: url("../../../assets/personal/images/bsgg.png")no-repeat center center;/*choose-icon-active.png"*/
    background-size: 100% 100%;
}
.chak_avti{
    margin-right: 10px;
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 50%;
    background: url("../../../assets/personal/images/choose-icon-active.png")no-repeat center center;/*choose-icon-active.png"*/
    background-size: 100% 100%;
}
.subtn{
    width: 90%;
    height: 45px;
    margin-top: 49px;
    background: red;
    color: #ffffff;
    border-radius: 5px;
}
</style>
<script>
export default {
    data () {
        return {//goodsThum:Thum,goodsName:Name,goodsNumber:Numbers,goodsScreenPrice:ScreenPrice
             imgUrls: [],
             companyId:this.$route.query.companyId1,
             goodsId:this.$route.query.id,
             goodsThum:this.$route.query.goodsThum,
             goodsName:this.$route.query.goodsName,
             goodsNumber:this.$route.query.goodsNumber,
             goodsScreenPrice:this.$route.query.goodsScreenPrice,
             goodsprodId:this.$route.query.prodId,
             commentContent:'',
             nm:false,
             niming_type:'',
            
        }
},
    mounted(){
       
    },
    methods:{
       orderdetailsHref:function(){//跳转
          this.$router.push({name:"orderdetails"})
       },
       onFileChange: function (e,targetparam) {
        var files = e.target.files || e.dataTransfer.files;
        console.log(targetparam);
        console.log(this[targetparam]);

        if (!files.length) return;
        this.createImage(files, e,targetparam);
      },
      niming:function(){
         this.nm=!this.nm
         if(this.nm){//匿名
             this.niming_type=1
         }else{
             this.niming_type=2
         }
         console.log(this.niming_type)
      },
      comment:function(){
          console.log(this.goodsId)
          if(""==this.commentContent){
             layer.msg("评论内容不能为空")
              return
          }
          var urlimg=this.imgUrls.join(",")
          this.$http.post(this.APIURL_PREFIX+'/api/wap/comment/creat',$.param({goodsId:this.goodsId,commentContent:this.commentContent,imgContent:urlimg,anonymous:this.niming_type,evaluate:1,prodId:this.goodsprodId,companyId:this.companyId})).then((response) => {
                layer.msg("发布成功")
                console.log(this.id)
                 this.$router.push({ name: "Commodity_details", query:{id:this.goodsId,subid:0} })
			   }).catch(function(err){
		    })
      },
       createImage: function (file, e,targetparam) {
        let vm = this;
        lrz(file[0], {width: 480 })
          .then(function (rst) {
            vm.$http({
              url: vm.APIURL_PREFIX+'/uploadForCertificate',
              method : "post",
              data : rst.formData
            }).then((response) => {
              console.log(response.data)
              if(0==response.data.code){
                if(targetparam){
                  vm[targetparam]= response.data.msg;
                }
                else{
                  if(vm.imgUrls.length){
                    vm.imgUrls.push(response.data.msg);
                  }
                  else{
                    vm.imgUrls= [response.data.msg];
                  }
                }
              }
            }).catch(function(err){
             layer.msg("上传失败");
              console.log(err)
            });
            return rst;
          }).always(function () {
          e.target.value = null;
        });
      },
       delImage: function (index) {
        let vm = this;
        if(confirm("确定删除该图片？")){
          vm.imgUrls.splice(index, 1);
        }
      }
    },
    watch: {
        commentContent: function (newVal, ordVal) {
           if(this.commentContent.length>50){
              layer.msg("字数上限最高为50")
              this.commentContent=ordVal
           }
        }
    }
    
}
</script>
